<!-- 
  混入

    1. 定义混入对象（一个包含有组件任意选项的一个对象）
    2. 使用混入对象，通过 mixins 选项
      mixins: [混入对象1, 混入对象2]

  特征是合并
    1. 组件与混入对象的数据会合并在一起，如果有同名的话，已组件优先
    2. 钩子函数相关的会合并成一个数组，都会被触发，混入对象的会先触发。

  在Vue3中弱化混入的概念，让我们少用
    https://cn.vuejs.org/guide/reusability/composables.html#comparisons-with-other-techniques

 -->

<template>
  <div>
    <h1>App - {{ name }} - {{ age }}</h1>
    <button @click="fn1">点我，调用 fn1</button>

    <button @click="fn2">点我，调用 fn2</button>

    <button @click="call">打电话</button>
  </div>
</template>

<script>
// 导入混入对象
import { mixinB } from "./mixins";

export default {
  mixins: [mixinB],

  data() {
    return {
      age: 18,
      // name: "李四",
    };
  },

  methods: {
    fn2() {
      console.log("App fn2");
    },
    fn1() {
      console.log("App fn1");
    },
  },

  created() {
    console.log("App created");
  },
};
</script>
